<template>
    <div>  <!--     面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单</el-breadcrumb-item>
      </el-breadcrumb>
      <!--  卡片区域-->
      <el-card>
        <el-row>
            <el-col :span="8">
              <el-input placeholder="请输入内容" v-model="input1"
                        class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="订单编号" prop="order_num"></el-table-column>
          <el-table-column label="订单价格" prop="order_price"></el-table-column>
          <el-table-column label="是否付款" >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.pay_status === '1'" type="success">已付款</el-tag>
              <el-tag v-else type="danger">未付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否发货" prop="is_send"></el-table-column>
          <el-table-column label="下单时间" prop="create_time">
            <template slot-scope="scope">
              {{scope.row.create_time | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="create_time">
            <template >
              <el-button size="mini" icon="el-icon-edit" type="primary"></el-button>
              <el-button @click="getL" size="mini" type="success" icon="el-icon-location"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        title="物流进度"
        :visible.sync="dialogVisible"
        width="50%">
        <span>  <el-timeline >
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.time">
      {{activity.context}}
    </el-timeline-item>
  </el-timeline></span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'index',
  created () {
    this.getList()
  },
  data () {
    return {
      input1: '',
      list: [],
      dialogVisible: false,
      activities: [
        {
          time: '2018-05-10 9:39:00',
          frtime: '2018-05-10 9:39:00',
          context: '已签收，感谢使用频率，期待为你服务',
          location: ''
        },
        {
          time: '2018-05-9 9:39:00',
          frtime: '2018-05-9 9:39:00',
          context: '，感谢使用频率，期待为你服务',
          location: ''
        },
        {
          time: '2018-05-8 9:39:00',
          frtime: '2018-05-8 9:39:00',
          context: '已签收，，期待为你服务',
          location: ''
        }
      ]
    }
  },
  methods: {
    getList () {
      const data = {
        goods: [
          {
            order_id: 68,
            user_id: 1,
            order_num: 'dhaushdasbd84123444',
            order_price: 322,
            is_send: '是',
            order_fapiao_title: '个人',
            pay_status: '1',
            create_time: 1645776889
          },
          {
            order_id: 69,
            user_id: 2,
            order_num: 'dhaushdassdsd84123444',
            order_price: 311,
            is_send: '是',
            order_fapiao_title: '个人',
            pay_status: '0',
            create_time: 1645776889
          }
        ],
        pageNum: '1',
        total: 27
      }
      this.list = data.goods
    },
    getL () {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>

</style>
